@model HomeAutio.Mqtt.GoogleHome.ViewModels.TraitViewModel

@section Scripts {
    <script src="~/js/traitTemplates.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.8.8/beautify.js"></script>
    <script src="~/lib/codemirror/lib/codemirror.js"></script>
    <script src="~/lib/codemirror/mode/javascript/javascript.js"></script>
    <link rel="stylesheet" href="~/lib/codemirror/lib/codemirror.css" />

    <script src="//rawgithub.com/zaach/jsonlint/79b553fb65c192add9066da64043458981b3972b/lib/jsonlint.js"></script>
    <script src="~/lib/codemirror/addon/lint/lint.js"></script>
    <script src="~/lib/codemirror/addon/lint/json-lint.js"></script>
    <link rel="stylesheet" href="~/lib/codemirror/addon/lint/lint.css" />

    <script src="~/lib/codemirror/addon/fold/foldcode.js"></script>
    <script src="~/lib/codemirror/addon/fold/brace-fold.js"></script>
    <script src="~/lib/codemirror/addon/fold/foldgutter.js"></script>
    <link rel="stylesheet" href="~/lib/codemirror/addon/fold/foldgutter.css" />

    <script src="~/lib/codemirror/addon/edit/closebrackets.js"></script>
    <script src="~/lib/codemirror/addon/edit/matchbrackets.js"></script>

    <script>
        var codemirrorOptions = {
            mode: "application/json",
            lineNumbers: true,
            foldGutter: true,
            gutters: ["CodeMirror-lint-markers", "CodeMirror-linenumbers", "CodeMirror-foldgutter"],
            lint: true,
            matchBrackets: true,
            autoCloseBrackets: true,
        };

        var attributesEditor = CodeMirror.fromTextArea(document.getElementById("Attributes"), codemirrorOptions);
        var commandsEditor = CodeMirror.fromTextArea(document.getElementById("Commands"), codemirrorOptions);
        var stateEditor = CodeMirror.fromTextArea(document.getElementById("State"), codemirrorOptions);

        // Templates
        var loadTemplate = function () {
            var traitDropDown = document.getElementById("Trait");
            var traitName = traitDropDown.options[traitDropDown.selectedIndex].text;

            if (traitName !== "Please select") {
                var beautifySettings = {
                    indent_size: 2,
                    space_in_empty_paren: true
                };

                attributesEditor.setValue(js_beautify(JSON.stringify(traitTemplates[traitName].attributes), beautifySettings));
                commandsEditor.setValue(js_beautify(JSON.stringify(traitTemplates[traitName].commands), beautifySettings));
                stateEditor.setValue(js_beautify(JSON.stringify(traitTemplates[traitName].state), beautifySettings));
            }
        };

        var openDocumentation = function () {
            var traitDropDown = document.getElementById("Trait");
            var traitName = traitDropDown.options[traitDropDown.selectedIndex].text;

            if (traitName !== "Please select") {
                window.open('https://developers.google.com/actions/smarthome/traits/' + traitName.toLowerCase());
            }
        }
    </script>

    <style>
        .CodeMirror {
            border: 1px solid #ccc;
            border-radius: 4px;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        }
    </style>
}

<div class="device-page">
    <div class="page-header">
        <h1>Create Trait</h1>
    </div>

    <partial name="_ValidationSummary" />

    <div class="row">
        <div class="col-sm-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Create Trait</h3>
                </div>
                <form method="post">
                    <div class="panel-body">
                        <fieldset>
                            <div class="form-group">
                                <label asp-for="Trait">Trait</label>
                                <select class="form-control" asp-for="Trait" asp-items="Html.GetEnumSelectList<HomeAutio.Mqtt.GoogleHome.Models.TraitType>()">
                                    <option selected="selected" value="">Please select</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <a onclick="loadTemplate()" class="btn btn-warning">Load Example Templates</a>
                                <a onclick="openDocumentation()" class="btn btn-warning">Trait documentation</a>
                            </div>

                            <div class="form-group">
                                <label asp-for="Attributes">Attributes</label>
                                <textarea class="form-control" asp-for="Attributes"></textarea>
                            </div>

                            <div class="form-group">
                                <label asp-for="Commands">Commands</label>
                                <textarea class="form-control" asp-for="Commands"></textarea>
                            </div>

                            <div class="form-group">
                                <label asp-for="State">State</label>
                                <textarea class="form-control" asp-for="State"></textarea>
                            </div>
                        </fieldset>
                    </div>
                    <div class="panel-footer">
                        <div class="form-group">
                            <button class="btn btn-primary" name="button" value="update">Create</button>
                            <a asp-controller="GoogleDevice" asp-action="Edit" asp-route-deviceId="@(Context.Request.Query["deviceId"])" class="btn btn-default">Cancel</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>